/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-14 16:05:29
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-20 09:50:20
 */

import { Component } from 'react'
import {View } from '@tarojs/components'
import LgTarBarItem from '../tarBarItem'
// import {AtSwitch, AtForm} from 'taro-ui'

import '../../images/public/style.css'
import './index.scss'


/*
    参数说明
    传入：{
        className,//可选 备注：父容器className便于修改背景颜色，阴影等
        imageUrl,//可选 备注：不传默认使用默认占位图
        selectedImageUrl, //可选 备注：不传默认使用imageUrl，若也无imageUrl默认占位图
        name, //可选 备注：不传默认为“标题X”
        selectedName, //已剔除
        selectedNameColor,//可选 备注：默认颜色rgb(0,144,255)
        defaultSelectedIndex,//可选 备注：默认0
    }
    提供回调事件：{
        handleChange(index)//index为点击当前点击索引index
    }
*/

export default class LgTarBar extends Component {
  constructor () {
    super(...arguments)
    this.triggerState = this.triggerState.bind(this)
  }
  state = {
    lists:[]
  }
  triggerState(index){
    let lists = this.state.lists
    lists = lists.map(o=>{
        return {
            ...o,
            isSelected:false
        }
    })
    lists[index].isSelected = true
    this.setState({ lists })
    this.props.handleChange && this.props.handleChange(index)
  }
  componentDidMount(){
      let lists = this.props && this.props.lists || []
      if(lists.length<=1){
        this.setState({ lists:[] })
        return
      }else if(lists.length>=4){
        lists = lists.slice(0, 4)
      }
      lists = lists.map(o=>{
          return {
              ...o,
              isSelected:false
          }
      })
      if(lists.length){
        let defaultIndex = 0
          if(this.props.defaultSelectedIndex){
            let tempIndex = parseInt(this.props.defaultSelectedIndex)
            if(tempIndex > 0 && tempIndex <= lists.length-1){
                defaultIndex = tempIndex
            }
          }
          lists[defaultIndex].isSelected = true
      }
      this.setState({ lists })
  }
  render () {
    const lists = this.state.lists || []
    , _itemWidth = lists.length ? Math.floor((100 / lists.length)) : 100
    , className = this.props.className ? (' '+this.props.className) :  ""
    return (
        <View className={'a_tarbar_container'+className} style={{display:lists.length?'flex':'none'}}>
            {
                lists.map((o, i)=>{
                    return (
                        <LgTarBarItem key={'tarbar_item'+i} data={o} index={i} triggerState={this.triggerState} width={_itemWidth}></LgTarBarItem>
                    )
                })
            }
        </View>
    )
  }
}